<template>
  <div>
    <el-dialog title="客户列表" :visible.sync="show" custom-class="dialogClass" :close-on-press-escape="false" :close-on-click-modal="false" @close="handleClose">
      <el-table :data="gridData">
        <el-table-column property="id" align="center" label="编号" width="50"></el-table-column>
        <el-table-column property="name" align="center" label="姓名"></el-table-column>
        <el-table-column property="address" align="center" label="地址"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>

              <el-button style="margin-left: 10px"
                         size="mini"
                         type="danger"
                         @click="deleteUser(scope.row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[pageSize]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-dialog>





    <el-dialog title="修改客户" :visible.sync="editDialog" custom-class="dialogClass" :close-on-press-escape="false" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="客户名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户地址" :label-width="formLabelWidth" prop="address">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="text" @click="addContactInfo">新增联系人</el-button>
      <el-table :data="customerDatalist" >
        <el-table-column property="realName" align="center" label="姓名"></el-table-column>
        <el-table-column property="position" align="center" label="职位"></el-table-column>
        <el-table-column property="phone" align="center" label="手机号"></el-table-column>
        <el-table-column property="isAdmin" align="center" label="是否管理员" :formatter="formatColumn"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="editCustomer(scope.row)">编辑</el-button>
              <el-button style="margin-left: 10px"
                         size="mini"
                         type="danger"
                         @click="deleteContactUser(scope.row)"
              >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveUserInfo">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增用户所属联系人" :visible.sync="contactDialog">
      <el-form :model="contactForm" :rules="contactRules" ref="contactForm">
        <el-form-item label="客户姓名" :label-width="formLabelWidth" prop="realName">
          <el-input v-model="contactForm.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="contactForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" prop="position">
          <el-input v-model="contactForm.position" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否管理员" :label-width="formLabelWidth" prop="isAdmin">
          <el-switch v-model="contactForm.isAdmin" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="登录名" :label-width="formLabelWidth" prop="loginName" v-if="contactForm.isAdmin">
          <el-input v-model="contactForm.loginName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth" prop="password" v-if="contactForm.isAdmin">
          <el-input v-model="contactForm.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="contactDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveContactInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "customer",
  data() {
    return{
      dialogTableVisible: false,
      gridData: [],
      pageSize: 8,
      pageNum: 1,
      total: 0,
      show: this.showDiaolog,
      form: {
        name: '',
        address: ''
      },
      editDialog: false,
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入客户地址', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      },
      customerDatalist: [],
      customerDatalistTotal: 0,
      contactForm: {
        realName: '',
        phone: '',
        position: '',
        isAdmin: false,
        loginName: '',
        password: ''
      },
      contactRules: {
        realName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        isAdmin: [
          { required: true, message: '请选择是否是管理员', trigger: 'blur' },
        ],
        loginName: [
          { required: true, message: '请输入登录名', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 50, message: '长度在 6 到 50 个字符', trigger: 'blur' }
        ]
      },
      contactDialog: false,
      customerFlag: 'add',
    }
  },
  props: {
    showDiaolog: Boolean,
    default: () => {
      return false
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      this.dialogTableVisible = true
      this.request.get('/uozo-alarm/user/getUserList', {
        name: this.form.name,
        address: this.form.address,
        pageNumNum: this.pageNum,
        pageSizeSize: this.pageSize
      }).then(res => {
        this.gridData = res.list
        this.total = res.total
      }).catch(err => {
        this.gridData = []
        this.total = 0
      })
    },
    handleEdit(data){
      this.flag = 'edit'
      this.editDialog = true
      this.form = data
      this.getContactInfoList()
    },
    deleteUser(data){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.post('/uozo-alarm/user/deleteUser', {
          userId: data.id
        }).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }).catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          });
        }).finally(() => {
          this.dialogFormVisible = false
          this.getUserList()
        })
      }).catch(() => {
        this.dialogFormVisible = false
      });
    },
    handleSizeChange(val) {
      this.pageSize=val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getUserList()
    },
    handleClose() {
      this.$emit('setDialogShow', {
        name: '',
        show: false
      })
    },
    saveUserInfo(){
      let _this = this
      _this.$refs['form'].validate(valid => {
        if (valid) {
          this.request.post('/uozo-alarm/user/updateUser', {
            id: this.form.id,
            name: this.form.name,
            address: this.form.address
          }).then(() => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }).finally(() => {
            this.editDialog = false
            this.getUserList()
          })
        } else {
          return false;
        }
      })
    },
    addContactInfo() {
      this.contactDialog = true
      this.customerFlag = 'add'
      this.$refs.contactForm.resetFields()
    },
    getContactInfoList() {
      this.request.get('/uozo-alarm/user/getUserAccountList', {
        pageNumNum: this.pageNum,
        pageSizeSize: this.pageSize,
        userId: this.form.id
      }).then(res => {
        this.customerDatalist = res.list
        this.customerDatalistTotal = res.total
      }).catch(err => {
        this.customerDatalist = []
        this.customerDatalistTotal = 0
      })
    },
    saveContactInfo(){
      let _this = this
      _this.$refs['contactForm'].validate(valid => {
        if (valid) {
          if (_this.customerFlag === 'add') {
            this.request.post('/uozo-alarm/user/addUserAccount', {
              realName: this.contactForm.realName,
              phone: this.contactForm.phone,
              position: this.contactForm.position,
              isAdmin: this.contactForm.isAdmin ? 1 : 0,
              loginName: this.contactForm.isAdmin ? this.contactForm.loginName : null,
              password: this.contactForm.isAdmin ? this.contactForm.password : null,
              userId: this.form.id
            }).then(() => {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.getContactInfoList()
            }).finally(() => {
              this.contactDialog = false
            })
          } else if (_this.customerFlag === 'edit') {
            this.request.post('/uozo-alarm/user/updateUserAccount', {
              realName: this.contactForm.realName,
              phone: this.contactForm.phone,
              position: this.contactForm.position,
              isAdmin: this.contactForm.isAdmin ? 1 : 0,
              loginName: this.contactForm.isAdmin ? this.contactForm.loginName : null,
              password: this.contactForm.isAdmin ? this.contactForm.password : null,
              userId: this.form.id,
              id: this.contactForm.id
            }).then(() => {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            }).finally(() => {
              this.contactDialog = false
              this.getUserList()
            })
          }
        } else {
          return false;
        }
      })
    },
    editCustomer(data) {
      this.customerFlag = 'edit'
      this.contactDialog = true
      this.customerTitle = '修改客户'
      this.contactForm = data
    },
    formatColumn(row, column, cellValue) {
      if (cellValue == 1) {
        return '是'
      }
      return '否'
    },
    deleteContactUser(data) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.post('/uozo-alarm/user/deleteUserAccount', {
          userAccountId: data.id
        }).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }).catch(err => {
          this.$message({
            message: err.msg,
            type: 'error'
          });
        }).finally(() => {
          this.getContactInfoList()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
